.sg-animated {
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.sg-color {
  background: #fff;
  border: 1px solid #b3b3b3;
  display: inline-block;
  height: 80px;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.31rem;
  position: relative;
  width: 100px;
}

.sg-color-swatch {
  display: block;
  height: 100%;
  width: 100%;
}

.sg-color-swatch span {
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  bottom: 5px;
  color: #fff;
  font-size: 0.8rem;
  margin: 0;
  opacity: 0;
  padding: 0.31rem 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 88px;
}

.sg-color-swatch:hover span {
  opacity: 1;
}

/* -------------------------------------------------------------------------
 Styleguide Colors
---------------------------------------------------------------------------- */

.sg-brand-primary .sg-color-swatch {
  background: #03A6D7;
}

.sg-gray-lighter .sg-color-swatch {
  background: #546677;
}

.sg-gray-light .sg-color-swatch {
  background: #629BAC;
}

.sg-neutral .sg-color-swatch {
  background: #BDD4DC;
}

.sg-muted .sg-color-swatch {
  background: #A2B3BE;
}

.sg-gray .sg-color-swatch {
  background: #fcfcfc;
}

.sg-gray-dark .sg-color-swatch {
  background: #f7f7f7;
}

.sg-gray-darker .sg-color-swatch {
  background: #ddd;
}

.sg-gray-darkest .sg-color-swatch {
  background: #333;
}

.sg-brand-success .sg-color-swatch {
  background: #62c876;
}

.sg-brand-info .sg-color-swatch {
  background: #03A6D7;
}

.sg-brand-unsure .sg-color-swatch {
  background: #E9DD00;
}

.sg-brand-warning .sg-color-swatch {
  background: #ffa800;
}

.sg-brand-danger .sg-color-swatch {
  background: #ff3b3d;
}

.sg-nav-pills {
  max-width: 220px;
}

